<!-- 布局容器组件 -->
<template>
  <div class="layouts" :style="layoutStyle">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import "@/assets/styles/transition.scss";
import { MenuWidth, MenuTypeEnum } from "@/constants/enums/menuEnum";
import { useMenuStore } from "@/stores/modules/menu";
import { useTabStore } from "@/stores/modules/tabs";
import { getTabConfig } from "@/utils/ui/tabs";
import { useRouter } from "vue-router";

defineOptions({ name: "BaseLayouts" });

const tabStore = useTabStore();
const menuStore = useMenuStore();
const router = useRouter();

const { menuOpen, menuType } = storeToRefs(menuStore);
const { showTabViews, tabStyle } = storeToRefs(tabStore);

// 菜单宽度变化
watchEffect(() => {
  const isOpen = menuOpen.value;
  const width = isOpen ? menuStore.getMenuOpenWidth : MenuWidth.CLOSE;
  menuStore.setMenuWidth(width);
});

// 布局样式
const layoutStyle = computed(() => ({
  paddingLeft: paddingLeft.value,
  paddingTop: paddingTop.value,
}));

// 左侧距离
const paddingLeft = computed(() => {
  const { meta } = router.currentRoute.value;
  const isFirstLevel = meta.isFirstLevel;
  const type = menuType.value;
  const isOpen = menuOpen.value;
  const width = isOpen ? menuStore.getMenuOpenWidth : MenuWidth.CLOSE;

  switch (type) {
    case MenuTypeEnum.Two_Column:
      return isFirstLevel ? "80px" : `calc(${width} + 80px)`;
    case MenuTypeEnum.Composite:
      return isFirstLevel ? 0 : width;
    case MenuTypeEnum.Horizontal:
      return 0;
    default:
      return width;
  }
});

// 顶部距离
const paddingTop = computed(() => {
  const { openTop, closeTop } = getTabConfig(tabStyle.value);
  return `${showTabViews.value ? openTop : closeTop}px`;
});
</script>
